<template>
    <div>
        <Row>
            <Col span="8">
            <Row class="query">
                <Col span="6">活动名称：</Col>
                <Col span="18">
                <Input v-model="queryCon.activityName" clearable ></Input>
                </Col>
            </Row>
            </Col>
            <Col span="8">
            <Row class="query">
                <Col span="6">活动类型：</Col>
                <Col span="18">
                <Select v-model="queryCon.type" filterable clearable>
                    <Option v-for="item in typeList" :value="item.id" :key="item.id">{{ item.name }}</Option>
                </Select>
                </Col>
            </Row>
            </Col>
            <Col span="8">
            <Row class="query">
                <Col span="6">交通方式：</Col>
                <Col span="18">
                <Select v-model="queryCon.vehicle" filterable clearable>
                    <Option v-for="item in vehicleList" :value="item.id" :key="item.id">{{ item.name }}</Option>
                </Select>
                </Col>
            </Row>
            </Col>
        </Row>
        <Row class="query">
            <Col span="24">
            <span @click="loadList"><Button type="primary" icon="android-search">查询</Button></span>
            <span @click="refresh"><Button type="primary" icon="refresh">清空</Button></span>
            </Col>
        </Row>
        <div class="main-table">
            <Table border :columns="columns" :data="data" highlight-row @on-row-click="rowClick"></Table>
        </div>
        <div class="pagination">
            <Page :total="total" size="small" :page-size="pageSize" :current.sync="pageIndex" @on-change="loadList"
                  show-total show-elevator></Page>
        </div>
    </div>
</template>
<style lang="less">
    @import '../../styles/common.less';
    @import '../../styles/loading.less';

    .query {
        margin-top: 5px;
        font-size: 15px;
        display: flex;
        justify-content:flex-end;
        align-items:Center;
    }

    .main-table {
        margin-top: 10px;
    }

    .pagination {
        margin-top: 10px;
        padding: 0 10px;
    }
</style>

<script>
    import util from '@/libs/util';

    export default {
        name: 'exportable-table',
        data () {
            return {
                columns: [{
                    title: '活动名称',
                    key: 'name',
                    ellipsis: true,
                    render: (h, params) => {
                        return h('Tooltip', {props: {placement: 'top-start'}}, [
                            h('div', {style: {'white-space': 'nowrap'}}, params.row.name),
                            h('div', {slot: 'content', style: {'white-space': 'normal'}}, params.row.name)
                        ]);
                    }
                }, {
                    title: '活动类型',
                    key: 'type',
                    render: (h, params) => {
                        return h('div', {}, params.row.type ? params.row.type.name : '');
                    }
                }, {
                    title: '交通方式',
                    key: 'vehicle',
                    render: (h, params) => {
                        return h('div', {}, params.row.vehicle ? params.row.vehicle.name : '');
                    }
                }],
                data: [],
                total: 0,
                pageIndex: 1,
                pageSize: 9,
                queryCon: {},
                typeList: [],
                vehicleList: [],
                activity: {}
            };
        },
        mounted () {
            this.loadList();
        },
        methods: {
            loadList () {
                util.ajax.post('/busine/activity/list', util.toFormData({
                    page: this.pageIndex,
                    size: this.pageSize,
                    activityName: this.queryCon.activityName ? this.queryCon.activityName : '',
                    type: this.queryCon.type ? this.queryCon.type : '',
                    vehicle: this.queryCon.vehicle ? this.queryCon.vehicle : '',
                    orgId: 0,
                    bs: 2
                })).then(res => {
                    this.data = res.data.data.pageInfo.list;
                    this.total = res.data.data.pageInfo.total;
                    this.typeList = res.data.data.typeList;
                    this.vehicleList = res.data.data.vehicleList;
                });
            },
            refresh () {
                this.queryCon = {};
                this.loadList();
            },
            rowClick (data, index) {
                this.activity = data;
            }
        }
    };
</script>
